<template>
	<view class="index">
		<!-- #ifdef MP-WEIXIN -->
		<view class="wx-nav">
			<view class="iconfont icon-Magnifier navleft" @click="toSearch"></view>
			<text>原农</text>
			<view class="iconfont icon-xiaoxizhongxin navright"></view>
		</view>

		<!-- #endif -->



		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollIntoIndex">
			<view class="scroll-item" v-for="(item,index) in topBar" :key="index" @click="changeTab(index)"
				:id="'top'+index">
				<text :class="topBarIndex===index?' f-active-color': 'f-color'">{{item.name}}</text>
			</view>
		</scroll-view>

		<swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px;'">
			<swiper-item v-for="(item,index) in newTopBar" :key="index">

				<scroll-view scroll-y="true" :style="'height:'+clentHeight+'px;'" @scrolltolower="loadMore(index)">
					<block v-for="(k,i) in item.data" :key="i" v-if="item.data.length>0">
					<!-- 推荐 -->
						<IndexSwiper v-if='k.type=="swiperList"' :dataList='k.data' :key="i"></IndexSwiper>
						<template v-if='k.type=="recommendList"'>
							<Recommend :dataList='k.data' :key="i"></Recommend>
							<Card cardTitle='猜你喜欢' ></Card>
						</template>
						
					<Banner v-if="k.type=='bannerList'" :dataList='k.imgUrl'></Banner>
					<template v-if="k.type=='iconsList'">
						<Icons :dataList='k.data'></Icons>
					<Card cardTitle="热销爆品"></Card>
					</template>
				
					<template  v-if="k.type=='hotList'">
					<Hot :dataList='k.data'></Hot>
					<Card cardTitle="推荐商铺"></Card>	 
					</template>
			
					<template  v-if="k.type=='shopList'">
					<Shop :dataList='k.data'></Shop>
					 <Card cardTitle="为您推荐"></Card> 
					</template>
			
						
						<CommodityList :dataList='k.data' :key="i" v-if='k.type=="commodityList"' ></CommodityList>
					

					</block>
<view v-else>
	暂无数据
</view>
<view class="load-text">
	{{item.loadText}}
</view>


				</scroll-view>
			</swiper-item>

		</swiper>
	<Tabbar currentPage="index"></Tabbar>
	</view>

</template>

<script>

	import IndexSwiper from '@/components/index/indexSwiper.vue'
	import Recommend from '@/components/index/Recommend.vue'
	import Card from '@/components/common/Card.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
	import Banner from '@/pages/index/Banner.vue'
	import Icons from '@/pages/index/Icons.vue'
	import Hot from '@/pages/index/Hot.vue'
	import Shop from '@/pages/index/Shop.vue'
	import Tabbar from '@/common/Tobbr.vue'
	export default {
		data() {
			return {
				//选中的索引
				scrollIntoIndex: 'top0',
				topBarIndex: 0,
				//内容块的高度值
				clentHeight: 0,
				topBar: [],
				//承载数据
				newTopBar: []
			}
		},
		components: {
			IndexSwiper,
			Recommend,
			Card,
			CommodityList,
			Banner,
			Icons,
			Hot,
			Shop,
			Tabbar
		},
		onLoad() {
			
			this.__init()

		},
		//app标题栏按钮点击
		onNavigationBarButtonTap(e) {
			if(e.float=='left'){
				uni.navigateTo({
					url:'../Search/Search'
				})
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.clentHeight = res.windowHeight - uni.upx2px(80)
					// #ifdef MP-WEIXIN
					this.clentHeight = res.windowHeight - uni.upx2px(330)
				
					// #endif
				}
			})
		},
		methods: {
			toSearch(){
				uni.navigateTo({
					url:'../Search/Search'
				})
			},
		async	__init() {
				// uni.request({
				// 	url: "http://10.8.203.244:3000/api/index_list/data",
				// 	success: (res) => {
				// 		let data = res.data.data;
				// 		this.topBar = data.topBar;
				// 		this.newTopBar = this.initData(data)
				// 		// 	console.log(this.newTopBar);

				// 		//       	console.log( "数据类型",	Array.isArray(this.newTopBar));

				// 	}
				// })
				let res= await this.$Request({
				url:"/api/index_list/data"
				})
						let data = res.data.data;
						this.topBar = data.topBar;
						this.newTopBar = this.initData(data)
				
			},

			//滑动滑动条调用的方法
			changeTab(index) {
				this.topBarIndex = index;
				this.scrollIntoIndex = 'top' + index;
				
				//每一次滑动赋值
				if( this.newTopBar[this.topBarIndex].load =='first'){
					this.addData()
				}
				
			},
			//滑动轮播条用的方法
			onChangeTab(e) {
				this.changeTab(e.detail.current)
			},
//对应显示不同数据
async addData(callback){

	//难道索引
	let index=this.topBarIndex;
	//拿到id
	let id =this.topBar[index].id;	
//一开始没数据是0，后面是1,2,3，但是初始接口是1所以向上取整+1

	let page=Math.ceil(this.newTopBar[index].data.length/5)+1
	//请求不同的数据
	// uni.request({
	// 	url:`http://10.8.203.244:3000/api/index_list/${id}/data/${page}`,
	// 	success: (res) => {
	// 		if(res.statusCode!=200){
	// 			return;
	// 		}else{
	// 		let data=res.data.data;
	// 		//合并数组赋值
	// 		this.newTopBar[index].data=[...this.newTopBar[index].data,...data]
	
	// 		}
	// 	}
	// })
	

	let res= await this.$Request({
	url:`/api/index_list/${id}/data/${page}`
	})

   let data=res.data.data;
				//合并数组赋值
    this.newTopBar[index].data=[...this.newTopBar[index].data,...data]

	this.newTopBar[index].load='last'
	if(typeof callback=='function'){
		callback()
	}
},

//上拉加载更多
loadMore(index){
	this.newTopBar[index].loadText='加载中...'
	//请求万数据，文字提示信息又换成【上拉加载更多】
	this.addData(()=>{
		this.newTopBar[index].loadText='加载中...'
	})
},
			//加载不同的数据
			initData(res) {
				let arr = [];

				for (let i = 0; i < this.topBar.length; i++) {
					let obj = {
						data: [],
						load:"first",
						loadText:"上拉加载更多"
					}
					//获取首次数据
					if (i == 0) {
						obj.data = res.data;
					}
					arr.push(obj)
				}
				return arr;
			}
		}
	}
</script>

<style scoped lang="scss">
	/* #ifdef MP-WEIXIN */
	.wx-nav {
		position: relative;
		top: 80rpx;
		height: 200rpx;
		width: 100%;
		line-height: 200rpx;
		text-align: center;
		display: flex;
		margin-bottom: 34rpx;
		justify-content: space-between;

		.navleft {
			margin-left: 8px;
		}

		.navright {
			margin-right: 8px;
		}
	}

	/* #endif */
	.scroll-content {
		width: 100%;
		height: 80rpx;
		white-space: nowrap;
	}

	.scroll-item {
		display: inline-block;
		padding: 10rpx 30rpx;
		font-size: 36rpx
	}

	.f-active-color {
		padding: 10rpx 0;
		border-bottom: 6rpx solid #49BDFB;
	}
	.load-text{
		border-top: 2px solid #636263;
		line-height: 60rpx;
		text-align: center;
	}
</style>
